<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">点击</button>
    <p>60</p>

    <script>
      const btn = document.querySelector('.btn')
      const p = document.querySelector('p')

      // function animation({ from, to, duration }) {
      //   const startTime = Date.now()
      //   const endTime = startTime + duration
      //   const startValue = from
      //   const endValue = to
      //   const changeValue = endValue - startValue
      //   const step = () => {
      //     const now = Date.now()
      //     const progress = Math.min((now - startTime) / duration, 1)
      //     const currentValue = startValue + changeValue * progress
      //     p.textContent = currentValue
      //     if (now < endTime) {
      //       requestAnimationFrame(step)
      //     }
      //   }
      //   requestAnimationFrame(step)
      // }
      function animation({ from, to, duration, onProgress }) {
        let v = from
        const start = Date.now()
        const speed = (to - from) / duration

        function _run() {
          const t = Date.now() - start
          v = from + speed * t
          onProgress(v)
          if (t >= duration) {
            v = to
            onProgress(v)
            return
          }

          requestAnimationFrame(_run)
        }

        _run()
      }
      btn.onclick = function () {
        animation({
          from: 60,
          to: 0,
          duration: 1000 * 60,
          onProgress(v) {
            p.textContent = Math.floor(v)
          },
        })
      }
    </script>
  </body>
</html>
